
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.ico">

    <title>Registrar Entrada de Productos | Gestión de Almacén</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
    <link href="DataTables-1.10.0/media/css/jquery.dataTables.css" rel="stylesheet">

    <!-- Custom styles for this template -->
     <link href="css/jumbotron.css" rel="stylesheet"> 
     <link href="css/estilo.css" rel="stylesheet" type="text/css" />

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  
  
  </head>

  <body>

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">

      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="almacen.htm">Sistema de Gestión Odontológica</a>
        </div>  
    
        <ul class="nav navbar-nav">
          <li ><a href="almacen.htm"><span class="glyphicon glyphicon-home"></span> Inicio</a></li>
          <li ><a href="mantener_producto.htm">Mantener Producto</a></li>
          <li ><a href="#">Mantener Proveedor</a></li>
          <li class="active"><a href="registar_entrada.htm">Registrar Entrada</a></li>

        </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a>Bienvenido: Julio</a></li>
        <form name="login" class="navbar-form navbar-right" role="form">
          <button type="button" class="btn btn-link"><a href="index.htm">cerrar sesión</a></button>
        </form>
        <!-- <li><button type="button" class="btn btn-link"><a href="index.htm">cerrar sesión</a></button></li> -->
        <!-- <li><a href="index.htm"><u>cerrar sesión</u></a></li> -->
      </ul>

      </div>
    </div>
    

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="container">
    <div class="page-header">
      <ul class="breadcrumb">
        <li><a href="almacen.htm">Almacén</a></li>
        <li class="active">Registrar Entrada</li>
      </ul>
      
        <h1>Registrar Entrada de Producto</h1>
      </div>
    </div>



    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-8">
      <div class="bs-example" style="padding-bottom: 24px;">

            <form role="form"><!-- formulario ingresar nuevo producto -->
               <div class="form-group">
                <label for="name">Código</label>
                <input type="text" class="form-control" id="new_codigo" placeholder="código">
               </div>

               <div class="form-group">
               <label for="name">Proveedor</label>
               <select class="form-control">
                <option>Química Suiza</option>
                <option>Botica El Angel</option>
                <option>Inversiones Acosta</option>
                <option>Maquinarias Palomino</option>
                <option>Importaciones Médicas</option>
              </select>
              </div>

               <div class="form-group">
                <label for="name">Fecha</label>
                <input type="datetime" value="20/06/2014" class="form-control" id="fecha" 
                 placeholder="Ingrese fecha">
               </div>

                <div class="form-group">
                <label for="name">Nota</label>
                <textarea class="form-control" rows="3"></textarea>
                </div>
            </form><!-- fin formulario -->


<!--         <a id="boton_nuevo" class="btn btn-primary ">Nuevo Registro</a>
        <a id="boton_eliminar" class="btn btn-primary pull-right">Eliminar Registro</a> -->

        <button id="boton_agregar" class="btn btn-primary" data-toggle="modal" data-target="#agregarModal">
        Agregar Producto
        </button>
        &nbsp;
        <a id="boton_eliminar" class="btn btn-primary ">Quitar Producto</a> 
      </div><!-- /example -->

      <!-- Modal -->
      <div class="modal fade" id="agregarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Agregar Producto</h4>
          </div>
          <div class="modal-body">
        <table id="table_prod" class="table " cellspacing="0" width="100%">
                  <thead>
                    <tr>
                      <th>Código</th>
                      <th>Nombre</th>
                      <th>Stock</th>
                      <th>Precio</th>
                    </tr>
                  </thead>
               
                  <tbody>
            <tr>
              <td>001</td>
              <td>Cepillo Dental</td>
              <td>30</td>
              <td>$4</td>
            </tr>
            <tr>
              <td>002</td>
              <td>Hilo Dental</td>
              <td>30</td>
              <td>$8</td>
            </tr>
            <tr>
              <td>003</td>
              <td>Mordedores</td>
              <td>30</td>
              <td>$6</td>
            </tr>
            <tr>
              <td>004</td>
              <td>Adhesivo Dental</td>
              <td>30</td>
              <td>$6</td>
            </tr>
            <tr>
              <td>005</td>
              <td>Enjuage Bucal</td>
              <td>30</td>
              <td>$11</td>
            </tr>
                  </tbody>
                </table>

            <form role="form"><!-- formulario ingresar nuevo producto -->
               <div class="form-group">
                <label for="name">Cantidad</label>
                <input type="text" class="form-control" id="ag_cantidad" placeholder="ingrese cantidad">
               </div>
            </form><!-- fin formulario -->
          </div>
          <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" id="boton_guardar_agregar" data-dismiss="modal">Agregar Producto</button>
          </div>
        </div>
        </div>
      </div>
       
      
      <table id="table_registro" class="table " cellspacing="0" width="100%">
          <thead>
            <tr>
              <th>Código</th>
              <th>Nombre</th>
              <th>Cantidad</th>
              <th>Subtotal</th>
            </tr>
          </thead>
       
        <tfoot>
            <tr>
                <th colspan="3" style="text-align:right">Total:</th>
                <th></th>
            </tr>
        </tfoot> 
       
          <tbody>
            <tr>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              <td>61</td>
              <td>$320,800</td>
            </tr>
          </tbody>
        </table>
        
        <div class="centered">
          <button id="boton_guardar" class="btn btn-large btn-success" data-toggle="modal" data-target="#guardarModal">
            Guardar Registro
          </button>
        </div>


              <!-- Modal -->
      
      <div class="modal fade" id="guardarModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Confirmación</h4>
          </div>
          <div class="modal-body">
            Los datos del registro de entrada se guardaron con éxito
          </div>
          <div class="modal-footer">
          <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button> -->
          <!-- <button type="button" href="almacen.htm" class="btn btn-primary" id="boton_confirmacion" data-dismiss="modal">Aceptar</button> -->
          <a href="registrar_entrada.htm" class="btn btn-primary">Aceptar</a>
          </div>
        </div>
        </div>
      </div>


        </div>
        <div class="col-md-4 ">
          <div class="well well-red">
          <legend>Ultimos Registros</legend>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div>
          
          <div class="well well-red">
          <legend>Productos Agotados</legend>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>

      </div>

      <hr>

      <footer>
        <p>&copy; Kuradent 2014</p>
      </footer>
    </div> <!-- /container -->

      <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  <script  src="js/jquery-1.11.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
  <!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/media/js/jquery.js"></script> -->
  <script type="text/javascript" charset="utf8" src="DataTables-1.10.0/media/js/jquery.dataTables.js"></script>
  <!--<script type="text/javascript" charset="utf8" src="js/dataTables.bootstrap.js"></script> -->
    <script>

    var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

  $(document).ready( function () {

    $('#fecha').datepicker({
    format: "dd/mm/yyyy"
    }); 


    var rowData;
    var total = 0;
    var tabla_prod = $('#table_prod').DataTable({"language": {
            "lengthMenu": "Mostrando _MENU_ registros ",
            "zeroRecords": "No se encontraron coincidencias",
            "info": "Mostrando _PAGE_ of _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "search":         "Buscar:",
             "paginate": {
            "first":      "Primera",
            "last":       "Ultima",
            "next":       "Siguiente",
            "previous":   "Previa"
            },
            "infoFiltered": "(filtrado desde _MAX_ registros en total)"
        }});


 
    tabla_prod.on( 'click', 'tr', function () {
      if ( $(this).hasClass('info') ) {
        $(this).removeClass('info');
      }
      else {
        tabla_prod.$('tr.info').removeClass('info');
        $(this).addClass('info');
        rowData = tabla_prod.row(this).data();
      }
    } );

    var tabla_reg = $('#table_registro').DataTable({

        "paging":   false,
        "ordering": false,
        "info":     false,
        "filter": false,
        "language": {
            "zeroRecords": "No ha ingresado datos",
            "infoEmpty": "No hay registros disponibles"}

  });

    var column = tabla_reg.column( 3 );

    tabla_reg.row(0).remove().draw( false ); 
    
    tabla_reg.on( 'click', 'tr', function () {
      if ( $(this).hasClass('info') ) {
        $(this).removeClass('info');
      }
      else {
        tabla_reg.$('tr.info').removeClass('info');
        $(this).addClass('info');
      }
    } );

    $('#boton_guardar_agregar').click( function () {
      var datos=[];

      datos[0] = rowData[0];
      datos[1] = rowData[1];
      datos[2] = document.getElementById("ag_cantidad").value;
      datos[3] = intVal(rowData[3]) * parseInt(document.getElementById("ag_cantidad").value);
      total = total + datos[3];
      datos[3] = "$"+datos[3];
      tabla_reg.row.add(datos);
      tabla_reg.draw();
      document.getElementById("ag_cantidad").value = "";

      $( column.footer() ).html("$"+total);

    } );

    $('#boton_eliminar').click( function () {

      tabla_reg.row('.info').remove().draw( false );
      
    } );

  } );



  </script>

  </body>
</html>
